<template>
  <el-dialog
    :title="`${dialogData.isEdit ? '填写' : '查看'}处理结果`"
    :visible.sync="dialogData.dialogVisible"
    width="600px"
    @close="closeDialog"
    @open="openDialog"
    :close-on-click-modal="false"
  >
    <el-form
      ref="form"
      :model="list"
      :rules="rules"
      :inline="true"
      label-width="130px"
      class="form"
      v-loading="listLoading"
    >
      <el-form-item prop="dealResult" label="处理结果：">
        <el-input
          style="width: 400px;"
          type="textarea"
          :rows="5"
          placeholder="请输入"
          v-model="list.dealResult"
          :disabled="!dialogData.isEdit"
        />
      </el-form-item>

      <div>
        <el-form-item label="相关图片：" class="div-width" prop="dealPicUrl">
          <multi-upload
            v-model="list.dealPicUrl"
            :hint="''"
            :isEdit="dialogData.isEdit"
          />
        </el-form-item>
      </div>
    </el-form>
    <div style="text-align: center; margin: 30px 0">
      <el-button @click="closeDialog">取消</el-button>
      <el-button @click="onSubmit('form')" type="primary">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import * as api from "@/api/renovation-rights-protection";

const defaultList = {
  dealResult: null,
  dealPicUrl: null
};

export default {
  name: "Detail",
  props: {
    dialogData: {
      type: Object,
      default: function() {
        return {
          dialogVisible: false,
          value: "",
          id: "",
          isEdit: true
        };
      }
    }
  },
  data() {
    return {
      listLoading: false,
      list: Object.assign({}, defaultList),
      rules: this.rules
    };
  },
  methods: {
    /* 取消 */
    cancel() {
      this.$router.back(-1);
    },
    /* 重置表单 */
    resetForm() {
      this.list = Object.assign({}, defaultList);
    },
    /* 关闭 */
    closeDialog() {
      this.dialogData.dialogVisible = false;
      this.list = Object.assign({}, defaultList);
    },
    /* 打开 */
    openDialog() {
      if (!this.dialogData.isEdit) {
        this.getInfo();
      }
    },
    getInfo() {
      this.listLoading = true;
      api
        .zbbDecorationRightsProtectionDetails(this.dialogData.id)
        .then(response => {
          this.listLoading = false;
          this.list = response.data;
        })
        .catch(error => {
          this.listLoading = false;
        });
    },
    /* 提交 */
    onSubmit() {
      this.requestFuc
        .onSubmit({
          _that: this,
          formName: "form",
          data: {
            ...this.list,
            id: this.dialogData.id
          },
          addFuc: api.zbbDecorationRightsProtectionComplete
        })
        .then(() => {
          this.listLoading = false;
          this.closeDialog();
          this.$emit("getList");
        })
        .catch(error => {
          this.listLoading = false;
        });
    }
  }
};
</script>
